import styles from './index.less'
import { Avatar, Input, Spin, message } from 'antd';
import { useCallback, useMemo, useState } from 'react';
import { UserOutlined } from '@ant-design/icons';
import CommentInput from '../CommentInput';
import { useModel, useParams, useRequest } from '@umijs/max';
import { addComment, getCommentList } from '@/services/article';
import { useLazyList } from '@/hooks';
import useSearchParams from '@/hooks/useSearchParams';
import CommentItem from './CommentItem';
import Item from 'antd/es/list/Item';
import LoginButton from '@/components/LoginButton';
type Props = {
    listProps:any,
    onChange:(flag:boolean)=>void
}
export default ({
    listProps={},
    onChange
}: Props) => {
    const { list, nextPage, loading, pageParams } = listProps||{};
    const { id } = useParams();
    const {userInfo} = useModel('global');
    const [data, setData] = useState([]);
    const [delIds,setDelIds]= useState([])
    const [reInputId,setReInputId] = useState();//回复评论展示
    const submitComment = ({ content, id }) => {// 提交评论
        setData((oldV) => {
            return [
                {
                    nickname: userInfo.nickname,
                    content: content,
                    id: id,
                    userId:userInfo.id,
                    createdTime:"刚刚",
                    avatar:userInfo.avatar,
                },
                ...oldV,
            ]
        })
        message.success('评论成功')
        onChange(true)
    }
    // const { list, nextPage, loading, pageParams } = useLazyList({ api: getCommentList, extraParams: { articleId: id } })
    const commentData = useMemo(() => {
        return [...data, ...(list || [])].filter(i=>!delIds.includes(i.id))
    }, [data, list,delIds])
    return <div className={styles.container}>
        <div className={styles.item}>
            <div className={styles.item_left}>
                <Avatar size={32} icon={<UserOutlined />} src={userInfo.avatar} />
            </div>
            <div className={styles.item_right}>
                <LoginButton text='登录后即可评论' buttonStyle={{height:'64px'}}><CommentInput onSubmit={submitComment} articleId={id} /></LoginButton>
            </div>
        </div>
        <div className={styles.list}>
            {
                commentData?.map?.((item, index) => {
                    return <CommentItem onChange={(flag)=>{
                        onChange(flag)
                        if(!flag){
                            setDelIds([
                                ...delIds,
                                item.id,
                            ])
                        }
                    }} key={item.id} id={item.id} userId={item.userId} content={item.content} name={item.nickname} avatar={item.avatar} createdTime={item.createdTime} reInputId={reInputId} changeReInputId={(commentId)=>{setReInputId(commentId)}}/>
                })
            }
            {
                loading && <Spin />
            }
        </div>
    </div>
}